<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <script src="../js/vue.js"></script>
    <link rel="import" href="../vue-component/navBar.html">
    <link rel="import" href="../vue-component/film-item.html">
    <link rel="import" href="../vue-component/actor.html">
    <link rel="import" href="../vue-component/film-comments.html">
    <title>电影详情</title>
    <script>
        Vue.component("navBar", navBar);
        Vue.component("actorName", actorName);
        Vue.component("filmComments", filmComments);
    </script>
    <script>
        window.onload = function () {
            new Vue({
                el: ".app",
                data: {
                    
                },
                components: {
                    commentDetail: {
                        template: "#commentDetail",
                        data(){
                            return{
                                imgs:[2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                            }
                        },
                        methods:{
                            hideUserInput(){
                                userCommentMb.style.display="none";
                            },
                            userChoose(ulDom){
                                if(ulDom.target.tagName=="LI"){
                                    // ulDom.target.parentNode.querySelector(".user-choose").className="";
                                    ulDom.target.parentNode.querySelector(".user-choose").classList.remove("user-choose");
                                    // ulDom.target.className="user-choose";
                                    ulDom.target.classList.add("user-choose");
                                }
                            },
                            stopEvent(e){
                                e.stopPropagation();
                            }
                        }
                    }
                },
                methods:{
                    showUserInput(){
                        userCommentMb.style.display="block";
                    }
                }
            })
        }
    </script>
</head>

<body>
    <!-- 项目容器 -->
    <div class="app">
        <!-- 电影搜索栏 -->
        <nav-bar></nav-bar>
        <div class="content-box">
            <div class="detail-box">
                <!-- 电影名称 -->
                <div class="film-name">蚁人2：黄蜂女现身</div>
                <!-- 电影信息 stat-->
                <div class="film-info">
                    <div class="film-tip">
                        <div class="comment-count">
                            <div class="film-source">
                                <span class="star-img open"></span>
                                <span class="star-img open"></span>
                                <span class="star-img open"></span>
                                <span class="star-img close"></span>
                                <span class="star-img close"></span>
                                <span class="star-source">7.9</span>
                            </div>
                            <div class="star-count">93601短评</div>
                        </div>
                        <div class="film-desc">
                            <p>
                                <span>上映时间:</span>2018</p>
                            <p>
                                <span>电影类型:</span>动作 / 科幻 / 冒险</p>
                            <p>
                                <span>参演明星:</span>佩顿·里德(导演) / 保罗·路德 / 伊万杰琳·莉莉 / 迈克尔·佩纳 </p>
                        </div>
                    </div>
                    <div class="film-img" style="background-image: url(../imgs/film.jpg)"></div>
                </div>
                <!-- 电影信息 end-->
                <!-- 电影简介 start -->
                <div class="film-plot">
                    <div class="plot-title">剧情简介</div>
                    <div class="plot-content">
                        来自漫威电影宇宙的新片《蚁人2：黄蜂女现身》重点展现了两位超级英雄令人惊叹的收缩能力。继《美国队长3》的故事线之后，斯科特·朗迎来了自己作为超级英雄和孩子父亲的双重身份。一方面，他在背负着蚁人职责的同时努力过好自己的生活；另一方面，二代黄蜂女霍普·凡·戴恩和汉克·皮姆博士又向他传达了一项紧迫的新任务。斯科特必须再次穿上战衣，与黄蜂女并肩作战，共同破解来自过去的谜题。
                    </div>
                </div>
                <!-- 电影简介 end -->
                <!-- 演员列表 -->
                <div class="film-actor">
                    <div class="actor-title">导演演员</div>
                    <div class="actor-list">
                        <actor-name v-for="(value,index) in 8" :key="index"></actor-name>
                    </div>
                </div>
                <!-- 用户评论区 -->
                <div class="film-comments">
                    <div class="comment-title">相关评论</div>
                    <div class="comment-list">
                        <film-comments v-for="(value,index) in 6" :key="index"></film-comments>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部评论区 -->
        <footer class="footer-box">
            <div class="comment-input" @click="showUserInput()" >不想说点什么吗？</div>
            <comment-detail></comment-detail>
        </footer>
    </div>
    <template id="commentDetail">
        <div class="comment-detail" id="userCommentMb"  @click="hideUserInput()">
            <div class="user-input" @click="stopEvent($event)">
                <h4>头像</h4>
                <ul class="user-head" @click.capture="userChoose($event)">
                    <li class="user-choose" data-img="user1.png" style="background-image: url(../imgs/users/user1.png)">
                    </li>
                    <li :data-img="`user${value}.png`" v-for="(value,index) in imgs" :key="index" :style="`background-image:url(../imgs/users/user${value}.png)`"></li>
                </ul>
                <h4>昵称</h4>
                <input class="user-nikename" type="text" placeholder="昵称">
                <h4>评分</h4>
                <div class="film-source reset-star">
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img close"></span>
                    <span class="star-img close"></span>
                    <span class="star-source">7.9</span>
                </div>
                <h4>评论</h4>
                <textarea class="user-message" placeholder="留下点足迹..."></textarea>
                <div class="send-btn">
                    <span @click="hideUserInput()">关闭</span>
                    <span>发送</span>
                </div>
            </div>
        </div>
    </template>
</body>

</html>